<template>
    <fieldset>
        <legend>失效函数的应用</legend>
        <h1 id="content">
            {{ content }}
        </h1>
        <button v-for="(btn,index) in button" :class="{active:index+1===page}" :key="index" @click="pageChange(index + 1)">第{{index + 1}}页</button>


    </fieldset>
</template>

<script setup>
import { ref, onMounted, reactive,watchEffect } from 'vue';
import CancelPromise from "./cancelPromise"


// 声明三个按钮
let button = reactive(['第一页', '第二页', '第三页'])

// 模拟3个请求，响应时间不一样

let api1 = signal => new CancelPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('第1页数据')
    }, 1000)
},signal)
let api2 = signal => new CancelPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('第2页数据')
    }, 1500)
},signal)
let api3 = signal => new CancelPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('第3页数据')
    }, 2000)
},signal)


//怎么取消promiss
// 抛出异常 

// 模拟请求
let api = {
    api1,
    api2,
    api3
}
// 声明响应式api
// 点击分页获取分页数据

let content = ref('')

// 声明三方的响应式变量来作为按钮的激活条件
let page =ref(1)



let pageChange = (pageSize) => {
  console.log(pageSize);
    // 给三方作为激活条件的变量进行赋值
    page.value=pageSize
}
/**
 * 
 * @param {Number} pageSize  传递给后台的页码 
 * @param {Object} signal 控制器 （AbortController）的signal对象
 */
//@param {数据类型} 参数 参数描述
// 封装获取内容（列表）方法
let fetchData = (pageSize=1,signal) => (
    api['api' + pageSize](signal)
        .then(res => {
            console.log(res);
            content.value = res
        })
)
// 使用watchEffect

watchEffect(invalidate=>{
    // 声明控制器
    let abortController =new AbortController();
    // 获取signal对象
    let signal =abortController.signal
    fetchData(page.value,signal)
    invalidate(()=>{
        // 页码切换之前，取消前一个请求
        abortController.abort()
    })
    
})

// 页面加载获取1页数据
// onMounted(() => {
//     fetchData()
// })
</script>

<style>
.active {
    background-color: hotpink;
}
</style>